<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>carousel</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.demo1 {
				margin-bottom: 20px;
			}
			
			.carousel {
				/*border: 1px solid red;*/
				position: relative;
				width: 100%;
				height: 100%;
				/*margin: 10px auto;*/
				overflow: hidden;
			}
			
			.carousel .pic_box {
				width: 99999999px;
			}
			
			.carousel .pic_box li {
				float: left;
			}
			
			.carousel .pic_box li img {
				display: block;
				width: 100%;
				height: 100%;
			}
			
			.carousel .arrow {
				width: 30px;
				height: 50px;
				line-height: 50px;
				background: rgba(255, 255, 255, .3);
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				border-radius: 50%;
				cursor: pointer;
				text-align: center;
				font-size: 20px;
				color: red;
				font-weight: bold;
				transition: all 300ms;
			}
			
			.carousel .left {
				left: -10%;
			}
			
			.carousel .right {
				right: -10%;
			}
			
			.carousel:hover .left {
				left: 0;
			}
			
			.carousel:hover .right {
				right: 0;
			}
			
			.carousel .panel {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				/*居中写法*/
				bottom: 0;
				margin: 0 auto;
			}
			
			.carousel .control {
				/*width: 10px;*/
				color: red;
				/*background: rgba(128, 128, 128, 0.5);*/
				background: orange;
				margin: 10px;
				border-radius: 50%;
				width: 20px;
				height: 10px;
				display: inline-block;
				cursor: pointer;
			}
			
			.carousel .active {
				background: rgba(255, 0, 0, 0.6);
			}
		</style>
	</head>

	<body>
		<div class="demo1">
			<div class="carousel">
				<ul class="pic_box">
					<li>
						<img src="images/pic1.jpg" />
					</li>
					<li>
						<img src="images/pic2.jpg" />
					</li>
					<li>
						<img src="images/pic3.jpg" />
					</li>
					<li>
						<img src="images/pic4.jpg" />
					</li>
					<li>
						<img src="images/pic5.jpg" />
					</li>
					<li>
						<img src="images/pic6.jpg" />
					</li>

				</ul>
				<ul class="panel"></ul>
				<div class="arrow left">&lt;</div>
				<div class="arrow right">&gt;</div>
			</div>
		</div>
		<div class="demo2">
			<div class="carousel">
				<ul class="pic_box">
					<li>
						<img src="images/pic1.jpg" />
					</li>
					<li>
						<img src="images/pic2.jpg" />
					</li>
					<li>
						<img src="images/pic3.jpg" />
					</li>
					<li>
						<img src="images/pic4.jpg" />
					</li>
					<li>
						<img src="images/pic5.jpg" />
					</li>
					<li>
						<img src="images/pic6.jpg" />
					</li>

				</ul>
				<ul class="panel"></ul>
				<div class="arrow left">&lt;</div>
				<div class="arrow right">&gt;</div>
			</div>
		</div>

		<!--JavaScript-->
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function carousel(caro_wrap, width, height, AniTime, stayTime) {
				var caro_wrap = $("." + caro_wrap);
				caro_wrap.css({
					width: width,
					height: height
				});
				caro_wrap.find("ul.pic_box li").css({
					width: width,
					height: height
				});
				var carousel = caro_wrap.find(".carousel");
				var pic_box = carousel.find("ul.pic_box");
				var pic_num = carousel.find("ul.pic_box li").length;
				var stepWidth = carousel.width(); //每次滚动要移动的距离
				var moveWidth = stepWidth; //初始偏移量
				var canClick = true;
				pic_box.append(carousel.find(".pic_box li").first().clone(true)); //复制第一张到最后面
				pic_box.prepend(carousel.find(".pic_box li").eq(-2).clone(true)); //复制倒数第二张（实际是原始的最后一张）到最前面
				pic_box.css("x", -stepWidth);
				var cur_show = 0;
				var next_show = 1;
				/**添加控制点*/
				for(var i = 0; i < pic_num; i++) {
					var panle_li = $("<li class='control'></li>");
					carousel.find(".panel").append(panle_li);
				}
				carousel.find(".control").eq(0).addClass("active"); //初始值第一个控制点默认active；

				/*****左右箭头添加监听事件******/
				carousel.find(".left").on("click", function() { //左点击实现
					if(canClick) {
						canClick = false;
						Tleft()
					}

				});
				carousel.find(".right").on("click", function() { //右点击实现
					if(canClick) {
						canClick = false;
						Tright()
					}
				});

				function Tleft() { //左按钮事件
					next_show = cur_show - 1;
					_scroll();
				}

				function Tright() { //右按钮事件
					next_show = cur_show + 1;
					_scroll();
					//控制点

				}
				/***给控制点添加点击事件****/
				carousel.find(".control").on("click", function() {
						if(canClick) {
							canClick = false;
							next_show = $(this).index();
							_scroll();
						}

					})
					/******定时器**********/
				var t = setInterval(function() {
					Tright();
				}, AniTime + stayTime)
				carousel.on("mouseover", function() {
					clearInterval(t)
				})
				carousel.on("mouseout", function() {
						t = setInterval(function() {
							Tright();
						}, AniTime + stayTime)
					})
					/*********提取出滚动函数*********/
				function _scroll() {
					//关键点,让moveWidth移动目标位置和当前位置的差距
					moveWidth += ((next_show - cur_show) * stepWidth);
					cur_show = next_show; //更新当前位置为目标位置
					pic_box.transit({
						"x": -moveWidth
					}, AniTime, function() {
						canClick = true;
						//console.log(cur_show,pic_num);
						if(cur_show > pic_num - 1) { //如果到了复制的第一张图片,就瞬间移动到原本的第一张图
							moveWidth = stepWidth;
							cur_show = 0;
							pic_box.css("x", -stepWidth)
						}
						if(cur_show < 0) {
							moveWidth = pic_num * stepWidth;
							cur_show = pic_num - 1;
							pic_box.css("x", -moveWidth)
						}
					})
					var tem = cur_show > pic_num - 1 ? 0 : cur_show;
					carousel.find(".control").eq(tem).addClass("active").siblings(".control").removeClass("active");
				}
			}
			carousel("demo1", 700, 400, 500, 1000);
			carousel("demo2", 350, 200, 500, 500);
		</script>
	</body>

</html>